<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>接机整体</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/airport.css">
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/autosize.js"></script>
</head>
<body>

	<div class="Shuttle">
		<div class="pick clear">
			<a class="rb">接机</a>
			<a>送机</a>
		</div>
		<div class="clear"></div>
	</div>
<div id="one_one" style="display: block;">
	<div class="air_dr">
		<div>
			<img src="images/flight.png">
			<p><span>979 樟宜国际机场</span><br>当地时间  2017-09-09  04:45 降落</p>
		</div>
		<div class="clear"></div>
		<div>
			<img src="images/time.png">
			<p><span>泰国酒村楼</span><br>全程预估：23.29公里，25 分钟</p>
		</div>
		<div class="clear"></div>
	</div>

	<div class="type">
		<p>选择车型<a><img src="images/standard.png">行李标准说明</a></p>
		<div class="type-cen">
			<ul>
				<li><img src="images/zero2.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>紧凑5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥432</span></li>
			</ul>
			<ul>
				<li><img src="images/zero1.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>舒适5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥436</span></li>
			</ul>
			<ul>
				<li><img src="images/zero1.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>豪华5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥466</span></li>
			</ul>
		</div>
		<div class="clear"></div>
		<a>更多车型<img src="images/more.png"></a>
	</div>

	<div class="message">
		<h4>联系人信息</h4>
		<p>中文姓名<input type="text" placeholder="请输入联系人中文姓名"></input></p>
		<p>英文姓名<input type="text" placeholder="请输入联系人英文姓名"></input></p>
		<p>手机号码<input type="text" placeholder="请输入联系人手机号码"></input></p>
		<p>境外手机号码(选填)<input type="text" placeholder="请输入联系人境外手机号码"></input></p>
		<p>微信号码(选填)<input type="text" placeholder="请输入联系人微信号码"></input></p>
	</div>
	<div class="optional">
		<h4>同行人信息（选填）</h4>
		<p>中文姓名<input type="text" placeholder="请输入联系人中文姓名"></input></p>
		<p>英文姓名<input type="text" placeholder="请输入联系人英文姓名"></input></p>
		<p>手机号码<input type="text" placeholder="请输入联系人手机号码"></input></p>
	</div>
	<div class="num">
		<h4>出行人数</h4>
		<p>请准确填写<a id="num"><img src="images/other.png"></a></p>
	</div>
	<div class="card">
		<p>免费举牌接机<a href=""><img src="images/button.png"></a></p>
		<p>请输入接机牌姓名</p>
	</div>
	<div class="ps">
		<h4>备注</h4>
		<textarea placeholder="给司机留言"></textarea>
	</div>
	<h5>服务开始前24小时可费免取消<a href="#">订单改退规则</a></h5>
	<h5>点击“去支付”表示您已经同意<a href="#">预订须知</a></h5>
	<div class="pay">
		<p>费用总计：<span>¥432</span><button>去支付</button></p>
	</div>
<!-- 行李尺寸 -->
	<div class="common">
		<div class="size">
			<p><img src="images/sizel.png">行李尺寸参考<img src="images/sizer.png"></p>
			<img src="images/size.png">
			
			<div class="explain">
				<h4>承载说明：</h4>
				<p>1. 由于各国车辆承载能力不同，具体咨询客服。</p>
				<p>2. 儿童座椅占1.5个座位，请您合理安排乘坐人数。</p>
				<p>3. 建议行李尺寸为24寸，每减少一位乘客，可增加一个24寸行李。</p>
			</div>
		</div>
	</div>
<!-- 出发人数 -->
	<div class="number">
		<div class="number_cen">
			<div class="num_choice">
				<p><a>取消</a>请选择出发人数<a>确认</a></p>
			</div>
			<div class="person">
				<ul>
					<li>
						<img src="images/adult.png">
					</li>
					<li>
						<p>成人</p>
					</li>
					<li>
						<i onclick="add()"><img src="images/add.png"></i>
						<input id="adult" type=text name=amount value="1" />
						<i onclick="sub()"><img src="images/cut.png"></i>
					</li>
				</ul>
			</div>
			<div class="clear"></div>
			<div class="person">
				<ul>
					<li>
						<img src="images/child.png">
					</li>
					<li>
						<p>儿童<br/><span>12岁及以下</span></p>
					</li>
					<li>
						<i onclick="add()"><img src="images/add.png"></i>
						<input id="child" type=text name=amount value="1" />
						<i onclick="sub()"><img src="images/cut.png"></i>
					</li>
				</ul>
			</div>
			<div class="clear"></div>
			<div class="person">
				<ul>
					<li>
						<img src="images/baby.png">
					</li>
					<li>
						<p>儿童座椅<br/><span>免费提供一个</span></p>
					</li>
					<li>
						<i onclick="add()"><img src="images/add.png"></i>
						<input id="baby" type=text name=amount value="1" />
						<i onclick="sub()"><img src="images/cut.png"></i>

					</li>
				</ul>
			</div>
			<div class="clear"></div>

			
		</div>
	</div>
	
</div>
<!-- 送机 -->
<div id="one_two" style="display: none;">
	
	<div class="air_dr">
		<div>
			<img src="images/flight.png">
			<h4>樟宜国际机场</h4>
		</div>
		<div class="clear"></div>
		<div>
			<img src="images/time.png">
			<p><span>泰国酒村楼</span><br>全程预估：23.29公里，25 分钟</p>
		</div>
		<div class="clear"></div>
		<div>
			<img src="images/his-content.png">
			<h4>2017-09-30  17:000（当地时间）</h4>
		</div>
		<div class="clear"></div>
	</div>
<!-- new -->
	<div class="type">
		<p>选择车型<a><img src="images/standard.png">行李标准说明</a></p>
		<div class="type-cen">
			<ul>
				<li><img src="images/zero2.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>紧凑5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥432</span></li>
			</ul>
			<ul>
				<li><img src="images/zero1.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>舒适5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥436</span></li>
			</ul>
			<ul>
				<li><img src="images/zero1.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>豪华5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥466</span></li>
			</ul>
		</div>
		<div class="clear"></div>
		<a>更多车型<img src="images/more.png"></a>
	</div>

	<div class="message">
		<h4>联系人信息</h4>
		<p>中文姓名<input type="text" placeholder="请输入联系人中文姓名"></input></p>
		<p>英文姓名<input type="text" placeholder="请输入联系人英文姓名"></input></p>
		<p>手机号码<input type="text" placeholder="请输入联系人手机号码"></input></p>
		<p>境外手机号码(选填)<input type="text" placeholder="请输入联系人境外手机号码"></input></p>
		<p>微信号码(选填)<input type="text" placeholder="请输入联系人微信号码"></input></p>
	</div>
	<div class="optional">
		<h4>同行人信息（选填）</h4>
		<p>中文姓名<input type="text" placeholder="请输入联系人中文姓名"></input></p>
		<p>英文姓名<input type="text" placeholder="请输入联系人英文姓名"></input></p>
		<p>手机号码<input type="text" placeholder="请输入联系人手机号码"></input></p>
	</div>
	<div class="num">
		<h4>出行人数</h4>
		<p>请准确填写<a id="num2"><img src="images/other.png"></a></p>
	</div>
	<div class="card">
		<p>免费举牌接机<a href=""><img src="images/button.png"></a></p>
		<p>请输入接机牌姓名</p>
	</div>
	<div class="ps">
		<h4>备注</h4>
		<textarea placeholder="给司机留言"></textarea>
	</div>
	<h5>服务开始前24小时可费免取消<a href="#">订单改退规则</a></h5>
	<h5>点击“去支付”表示您已经同意<a href="#">预订须知</a></h5>
	<div class="pay">
		<p>费用总计：<span>¥432</span><button>去支付</button></p>
	</div>
<!-- 行李尺寸 -->
	<div class="common">
		<div class="size">
			<p><img src="images/sizel.png">行李尺寸参考<img src="images/sizer.png"></p>
			<img src="images/size.png">
			
			<div class="explain">
				<h4>承载说明：</h4>
				<p>1. 由于各国车辆承载能力不同，具体咨询客服。</p>
				<p>2. 儿童座椅占1.5个座位，请您合理安排乘坐人数。</p>
				<p>3. 建议行李尺寸为24寸，每减少一位乘客，可增加一个24寸行李。</p>
			</div>
		</div>
	</div>
<!-- 出发人数 -->
	<div class="number">
		<div class="number_cen">
			<div class="num_choice">
				<p><a>取消</a>请选择出发人数<a>确认</a></p>
			</div>
			<div class="person">
				<ul>
					<li>
						<img src="images/adult.png">
					</li>
					<li>
						<p>成人</p>
					</li>
					<li>
						<i><img src="images/add.png"></i>
						<input type=text name=amount value="1" />
						<i><img src="images/cut.png"></i>
					</li>
				</ul>
			</div>
			<div class="clear"></div>
			<div class="person">
				<ul>
					<li>
						<img src="images/child.png">
					</li>
					<li>
						<p>儿童<br/><span>12岁及以下</span></p>
					</li>
					<li>
						<i><img src="images/add.png"></i>
						<input type=text name=amount value="1" />
						<i><img src="images/cut.png"></i>
					</li>
				</ul>
			</div>
			<div class="clear"></div>
			<div class="person">
				<ul>
					<li>
						<img src="images/baby.png">
					</li>
					<li>
						<p>儿童座椅<br/><span>免费提供一个</span></p>
					</li>
					<li>
						<i><img src="images/add.png"></i>
						<input type=text name=amount value="1" />
						<i><img src="images/cut.png"></i>

					</li>
				</ul>
			</div>
			<div class="clear"></div>

			
		</div>
	</div>
	

<!-- 
	<div class="type">
		<p>选择车型<a><img src="images/standard.png">行李标准说明</a></p>
		<div class="type-cen">
			<ul>
				<li><img src="images/zero2.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>紧凑5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥432</span></li>
			</ul>
			<ul>
				<li><img src="images/zero1.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>舒适5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥436</span></li>
			</ul>
			<ul>
				<li><img src="images/zero1.png"></li>
				<li><img src="images/pic1.png"></li>
				<li><p>豪华5座+中文司导</p><p>[<img src="images/peo.png">4人<img src="images/bag.png">2行李]</p></li>
				<li><span>￥466</span></li>
			</ul>
		</div>
		<div class="clear"></div>
		<a>更多车型<img src="images/more.png"></a>
	</div>

	<div class="message">
		<h4>联系人信息</h4>
		<p>中文姓名<input type="text" placeholder="请输入联系人中文姓名"></input></p>
		<p>英文姓名<input type="text" placeholder="请输入联系人英文姓名"></input></p>
		<p>手机号码<input type="text" placeholder="请输入联系人手机号码"></input></p>
		<p>境外手机号码(选填)<input type="text" placeholder="请输入联系人境外手机号码"></input></p>
		<p>微信号码(选填)<input type="text" placeholder="请输入联系人微信号码"></input></p>
	</div>
	<div class="optional">
		<h4>同行人信息（选填）</h4>
		<p>中文姓名<input type="text" placeholder="请输入联系人中文姓名"></input></p>
		<p>英文姓名<input type="text" placeholder="请输入联系人英文姓名"></input></p>
		<p>手机号码<input type="text" placeholder="请输入联系人手机号码"></input></p>
	</div>
	<div class="num">
		<h4>出行人数</h4>
		<p>请准确填写<a href=""><img src="images/other.png"></a></p>
	</div>
	<div class="card">
		<p>免费举牌接机<a href=""><img src="images/button.png"></a></p>
		<p>请输入接机牌姓名</p>
	</div>
	<div class="ps">
		<h4>备注</h4>
		<textarea placeholder="给司机留言"></textarea>
	</div>
	<h5>服务开始前24小时可费免取消<a href="#">订单改退规则</a></h5>
	<h5>点击“去支付”表示您已经同意<a href="#">预订须知</a></h5>
	<div class="pay">
		<p>费用总计：<span>¥432</span><button>去支付</button></p>
	</div>
 -->
</div>

	<script>
		$(function(){

			$(".pick").delegate("a","click",function(){
				$(this).addClass("rb");
				$(".pick a").not(this).removeClass("rb");
				// 接机
				if ($(this).index()==0) {	
					$("#one_one").css("display","block");
					$("#one_two").css("display","none");
				}
				// 送机
				if ($(this).index()==1) {	
					$("#one_two").css("display","block");
					$("#one_one").css("display","none");
				}
			});


			//行李尺寸
			$('.type-cen ul li:nth-of-type(3)').click(function(){
				$('.common').show();
			})
			$('.common').click(function(){
				$('.common').hide();
			});
			//出行人数
			$('#num').click(function(){
				$('.number').show();
			})
			$('.num_choice a').click(function(){
				$('.number').hide();
			});
			$('#num2').click(function(){
				$('.number').show();
			})

		})
	</script>




<script>
	 function add(){
        var txt=document.getElementById("adult");
        var a=txt.value;
        a++;
        txt.value=a;

    }
    function sub(){
        var txt=document.getElementById("adult");
        var a=txt.value;
        if(a>1){
            a--;
            txt.value=a;
        }else{
            txt.value=1;
        }
        
    }

</script>

</body>
</html>